<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map,
      #canvas {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
    .btn {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 99;
    }
  </style>
</head>
<body>
<div id="map">
  <button class="btn" onclick="changeBaseMap()">底图切换</button>
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var base = 'nav';
    var rootPath = 'http://localhost:63342/mapboxgl-lecture/data/'
    const style = {
        "version": 8,
        "name": "lzugis", // dark, light, pink
        "sprite": rootPath + "sprite",
        "light": {
            "anchor": "viewport",
            "color": "white",
            "intensity": 0.4
        },
        "transition": {
            "duration": 300,
            "delay": 100
        },
        "sources": {
            "nav": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            },
            "capital": {
                type: 'geojson',
                data: 'data/point.geojson'
            }
        },
        "layers": [{
            "id": "nav",
            "type": "raster",
            "source": "nav",
            "minzoom": 0,
            "maxzoom": 17
        },{
            'id': 'capital-lz',
            'source': 'capital',
            'type': 'circle',
            // "filter": [
            //     "in",
            //     "id",
            //     10, 11, 12, 13
            // ],
            'paint': {
                'circle-radius': 8,
                'circle-color': [
                    'case',
                    ['<', ['get', 'id'], 10], '#0000ff',
                    ['<', ['get', 'id'], 20], '#fff400',
                    ['<', ['get', 'id'], 30], '#ff8f39',
                    '#f00' // 默认值
                ]
            }
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 2,
        minZoom: 2,
        maxZoom: 18
    });
</script>
</body>
</html>